import {
  PageContainer,
  ProForm,
  ProFormDigit,
  ProFormGroup,
  ProFormList,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { FormattedMessage } from '@umijs/max';
import { Card, Col, Row, Space, message } from 'antd';
import { useState } from 'react';

type LayoutType = Parameters<typeof ProForm>[0]['layout'];
const LAYOUT_TYPE_HORIZONTAL = 'horizontal';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default () => {
  const [formLayoutType] = useState<LayoutType>(LAYOUT_TYPE_HORIZONTAL);

  const formItemLayout =
    formLayoutType === LAYOUT_TYPE_HORIZONTAL
      ? {
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
        }
      : null;

  return (
    <PageContainer>
      <Card>
        <ProForm<{
          name: string;
          company?: string;
          useMode?: string;
        }>
          {...formItemLayout}
          layout={formLayoutType}
          submitter={{
            render: (props, doms) => {
              return formLayoutType === LAYOUT_TYPE_HORIZONTAL ? (
                <Row>
                  <Col span={14} offset={4}>
                    <Space>{doms}</Space>
                  </Col>
                </Row>
              ) : (
                doms
              );
            },
          }}
          onFinish={async (values) => {
            await waitTime(2000);
            console.log(values);
            message.success('提交成功');
          }}
          params={{}}
          request={async () => {
            await waitTime(100);
            return {
              name: '',
              useMode: 'chapter',
              contract: { name: 555 },
            };
          }}
        >
          <ProFormText
            name="name"
            label="任务名称"
            tooltip="最长为 24 位"
            placeholder="请输入名称"
            rules={[
              {
                required: true,
                message: <FormattedMessage id="comm.required" defaultMessage="必填字段" />,
              },
            ]}
          />
          <ProFormSelect
            options={[
              {
                value: 'chapter',
                label: 'pytorch:24.07',
              },
            ]}
            name="chapter"
            label="选择镜像"
            rules={[
              {
                required: true,
                message: <FormattedMessage id="comm.required" defaultMessage="必填字段" />,
              },
            ]}
          />
          <ProFormList
            name="mount"
            label="数据挂载"
            creatorButtonProps={{
              position: 'bottom',
              creatorButtonText: '添加',
            }}
          >
            <ProFormGroup key="group">
              <ProFormSelect
                options={[
                  {
                    value: 'chapter',
                    label: 'pytorch:24.07',
                  },
                ]}
                name="data"
                placeholder="数据卷"
              />
              <ProFormText fieldProps={{ addonBefore: '挂载路径' }} name="value" />
            </ProFormGroup>
          </ProFormList>
          <ProFormList
            name="env"
            label="环境变量"
            // initialValue={[
            //   {
            //     useMode: 'chapter',
            //   },
            // ]}
            creatorButtonProps={{
              position: 'bottom',
              creatorButtonText: '添加',
            }}
            // creatorRecord={{
            //   useMode: 'none',
            // }}
          >
            <ProFormGroup key="group">
              <ProFormText fieldProps={{ addonBefore: '键' }} name="key" />
              <ProFormText fieldProps={{ addonBefore: '值' }} name="value" />
            </ProFormGroup>
          </ProFormList>
          <ProFormTextArea
            name="name"
            label="启动命令"
            placeholder="请输入名称"
            rules={[
              {
                required: true,
                message: <FormattedMessage id="comm.required" defaultMessage="必填字段" />,
              },
            ]}
          />
          <ProFormDigit name="nServers" label="服务器数量" initialValue={1} />
          <ProFormDigit name="nGpus" label="服务器GPU数量" initialValue={8} />
          <ProFormSwitch name="restart" label="失败自动重启" />
          <ProFormSwitch name="debug" label="开启调试" />
        </ProForm>
      </Card>
    </PageContainer>
  );
};
